<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script type="text/javascript" src="JavaScript/ArtistList.js"></script>
<script type="text/javascript">
    var result=new ArtistList;
    var limitResults=10;
    var object=new Array();
    Event.observe(window, 'load', function() {
       $('searchButton').observe('click',getSongs);
    });

    function getSongs(event){
        var searchTerm=$('searchbar').value;
        new Ajax.Request('Ajax.php',{
           method:'post',
           parameters:{searchTerm:searchTerm},
           onSuccess:addSongs
        });
    }
    function addSongs(data){

        result.list=eval('(' + data.responseText + ')');;
        var searchResults=result.searchList();

        $('listSongs').innerHTML='';
        for(var i=0;i<searchResults.length;i++){
           if(i==limitResults){
                break;
            }
            var li=new Element('li');
            var span=new Element('span');
            span.onclick=showArtist;
            var artistID=searchResults[i]['id'];
            span.update(searchResults[i]['name']);
            span.objectID=artistID;
            li.insert(span);
            var ul=new Element('ul');
            for(var c=0;c<searchResults[i]['search'].length;c++){
                var liTrack=new Element('li');
                var trackID=searchResults[i]['search'][c]['id'];
                liTrack.artistID=artistID;
                liTrack.trackID=trackID;
                liTrack.onclick=playTrack;
                liTrack.update(searchResults[i]['search'][c]['name']);
                ul.insert(liTrack);
            }
            li.insert(ul);

            $('listSongs').insert(li);
        }
    }
    function updateLink(data){
        var link='http://www.youtube.com/embed/'+data.responseText;
        var iframe=new Element('iframe',{'src':link,'width':'550','height':'290'});
        $('ytplayer').update(iframe);
    }
    function suggest(event){
        new Ajax.Request('search.php',{
           method:'post',
           parameters:{option:'artist',query:this.innerHTML},
           onSuccess:addSongs
        });
        $('listSuggestions').update();
    }
    function updateSuggestions(data){
        $('listSuggestions').update();
        var response=eval('('+data.responseText+')');
        for(var i=0;i<response.length;i++){
            var li=new Element('li');
            var span=new Element('span');
            span.observe('click',suggest);
            span.insert(response[i]);
            li.update(span);
            console.log(response[i]);
            $('listSuggestions').insert(li);
        }
    }
    function requestLink(id){
        var info=$(this.id).getAttribute('search');
        new Ajax.Request('YouTube.php',{
           method:'get',
           parameters:{search:info},
           onSuccess:updateLink
        });
        var parent=document.getElementById(this.id).parentNode;
        var childNodes=parent.childNodes;
        var artist=childNodes[1].childNodes[0].innerHTML;
        new Ajax.Request('recommendation.php',{
           method:'get',
           parameters:{artist:artist},
           onSuccess:updateSuggestions
        });
    }

    function showArtist(){
        $('trackList').update();
        switchMiddle('view');
        var artistID=this.objectID;
        var artist=result.searchArtist(artistID);
        console.log(artist);
        $('bio').update(artist['careerInformation']);
        var image=new Element('img');
        image.setAttribute('src',artist['image']);
        $('avatar').update();
        $('avatar').insert(image);
        var albums=artist['albums'];

        $('albums').update();
        var keys=new Array();

        for(var album in albums){
            if(albums.hasOwnProperty(album)){
                keys.push(album)
            }
         }
         for(var i=0;i<keys.length;i++){
             var album=albums[keys[i]];
              var div=new Element('div');
            div.setAttribute('class', 'albumcover');
            div.onclick=showAlbum;
            div.albumID=album['id'];
            div.artistID=artistID;
            var imageAlbum=new Element('img');
            imageAlbum.setAttribute('src',album['cover']);
            div.insert(imageAlbum);
            $('albums').insert(div);
         }
       /*    */
        
       
    }
    function switchMiddle(arg){
        if(arg=='view'){
            $('middleplay').setStyle({display:'none'});
            $('middleview').setStyle({display:'block'});
        }
        else{
            $('middleplay').setStyle({display:'block'});
            $('middleview').setStyle({display:'none'});
        }

    }
    function showAlbum(){

        switchMiddle('view');
        var albumID=this.albumID;
        var artistID=this.artistID;
        var album=result.searchAlbum(albumID);
        $('bio').update(album['bio']);
        var image=new Element('img');
        console.log(album);
        image.setAttribute('src',album['cover']);
        $('avatar').update();
        $('avatar').insert(image);
        
        var tracks=album['tracks'];
        var keys=new Array();
        for(var track in tracks){
            if(tracks.hasOwnProperty(track)){
                keys.push(track)
            }
        }
        $('trackList').update();
        for(var i=0;i<keys.length;i++){

            var track=tracks[keys[i]];
            console.log(track);
            var li=new Element('li');
            li.update(track['name']);
            li.onclick=playTrack;
            li.artistID=artistID;
            li.albumID=albumID;
            console.log(track['id']);
            li.trackID=track['id'];
            $('trackList').insert(li);
        }
    }
    function playTrack(){
        switchMiddle('player');
        console.log(this.artistID+" "+this.trackID);
    }
</script>
<title>IKE Music Player</title>
</head>

<body>


<div id="top">

    <div id="rechtsboven">


   <form id="loginform" action="" method="post" name="contact_form">
                <ul>
                    
                    <li>
                        <input  type="text" name="user" placeholder="username" id="email"/>
                    </li>
                    <li>
                        <input type="password" name="pass" placeholder="password" id="password"/>
                    </li>
                    <li>
                        <button id="loginbutton" type="submit" >login</button>
                    </li>
                </ul>
                </form>
                <span id="reg"><a href="registreer.html">register</a></span>
           </div>   
          
        <center><span id="logo"><img src="logo.png"  /></span> </center>
</div>


<div id="blackbar">
                <form id="searchForm" action="" method="post" name="contact_form">
               
                        <input  type="text" name="user" placeholder="Search for your song or artist" id="searchbar"/>
                                        
                        <input type="button" id="searchButton" value="Go!"/>
                
                </form>
                
                
                
                
             
</div>

<center>
<div id="main">

						<div id="wrappersug">
                                                    
                                                    				<div id="headersug">
                                                                    	<h2>SUGGESTIONS</h2></div>
                                                                    
                                                              
                                                                    
                                									<div id="suggestions">
                                    								<ul id="listSuggestions">
                                                                                                   

                                                                                                </ul>
                                									</div>
                                            		</div>
                                                    
                                                    
                                                    <div id="wrapperres">
                                                    
                                                    			<div id="headerres">
                                                                	<h2>RESULTS</h2></div>
                                                                    
                                                                    
                                                                <div id="results">
                                                                    <ul id="listSongs">
                                                                     
                                                                    </ul>
                                                                    
                                                                </div>
                                                    </div>
                                
                                					
                                
                                			
                                					
                                                    
                                                    
                                                    
                                                   <div id="middle">
                                                  					
                                                  		
                                                  					<div id='middleplay'>
                                                                                    <div id="wrapperplayer">
                                                                                        <div id="headerplayer">
                                                                                            <h2>CURRENTLY PLAYING</h2></div>
                                                                                        
                                                                                                <div id="ytplayer">

  <embed src="http://www.youtube.com/v/u1zgFlCw8Aw?version=3&autohide=1&showinfo=0"
         type="application/x-shockwave-flash"
         allowscriptaccess="always"
         width="425" height="340"></embed>

                                                                                                </div>
                                                                                    </div>
                                                                                        </div>
                                                                            

                                                                    
                                                                    
                                                                    
                                                                    
                                                           
                                                             
                                                                                         <div id="middleview">
                                                                                                        <div id="wrapperartist">
                                                                                                            <div id="headerplayer">
                                                                                                                <h2>ARTIST INFO</h2></div>
                                                                                                            
                                                                                                                    <div id="artistinfo">
                                                                                                                    
                                                                                                                        <div id="avatar">
                                                                                                                        </div>
                                                                                                                        <div id="tracks">
                                                                                                                            <ul id="trackList">
                                                                                                                                
                                                                                                                            </ul>
                                                                                                                        </div>
                                                                                                                        <div id="bio">
                                                                                                                        </div>
                                                                                                                        
                                                                                                                    
                                                                                                                    
                                                                                                                    </div>
                                                                                                        </div>
                                                                                                        
                                                                                                  </div>
                                                                                                        <div id="wrapperalbums">
                                                                                                            <div id="headerinfo">
                                                                                                                <h2>ALBUMS</h2></div>
                                                                                                            
                                                                                                                    <div id="albums">
     
                                                                                                                        
                                                                                                                    </div>
                                                                                                        </div>
                                                                                      
                                                             
                                                   
                                                    </div> <!-- end middle --> 
                                                    
                                                    
                                                    
                                                    
                                                    
                                            
                                            
                            </div>

</center>

<div id="bottom">
    <span>MADE BY VINCENT, POUJA AND PING</span>
</div>



</body>
</html>
